<template>
  <el-card class="info-home-page">
    <div slot="header">
      <h3>填写分类信息明细</h3>
    </div>
    <div class="info-body">
      <el-form
        ref="formData"
        :model="formData"
        label-width="150px"
      >
        <el-form-item prop="categoryName" label="分类名称：">
          <el-input
            v-model="formData.categoryName"
            maxlength="20"
            show-word-limit
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="categoryNo" label="分类编码：">
          <el-input
            v-model="formData.categoryNo"
            maxlength="15"
            show-word-limit
            placeholder="请输入分类编码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="position" label="位置：">
          <el-input-number
            v-model="formData.position"
            :controls="false"
            :precision="0"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item prop="state" label="是否启用：">
          <el-radio-group v-model="formData.state">
            <el-radio label="1">启用</el-radio>
            <el-radio label="2">不启用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="categoryNote" label="描述：">
          <el-input
            v-model="formData.categoryNote"
            type="textarea"
            placeholder="请输入内容"
            maxlength="30"
            show-word-limit
            :autosize="{ minRows: 2, maxRows: 4}"
          ></el-input>
        </el-form-item>
        <el-form-item prop="categoryProductType" label="限制类商品：">
          <el-radio-group v-model="formData.categoryProductType">
            <el-radio label="1">危险品</el-radio>
            <el-radio label="2">管制刀具</el-radio>
            <el-radio label="3">非限制</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="showDangerousOrder" prop="dangerousOrder" label="危化品等级：">
          <el-select
            v-model="formData.dangerousOrder"
            placeholder="请选择危化品等级"
            clearable
          >
            <el-option
              v-for="item in options.dangerousOrder"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="productTemplateNames" label="关联商品模板：">
          <el-input v-model="formData.productTemplateNames" readonly placeholder="请选择关联商品模板">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleLinkProductTemp"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="brandNames" label="关联品牌：">
          <el-input v-model="formData.brandNames" readonly placeholder="请选择关联品牌">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleLinkBrand"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="acceptItemNames" label="关联验收事项：">
          <el-input v-model="formData.acceptItemNames" readonly placeholder="请选择">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleLinkAcceptItem"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="classificationNames" label="关联归类名称：">
          <el-input v-model="formData.classificationNames" readonly placeholder="请选择">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleLinkClassificationName"
            ></el-button>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>
<script>
export default {
  data () {
    return {
      formData: {
        categoryName: '', // 分类名称
        categoryNo: '', // 分类编码
        position: '', // 位置
        state: '', // 是否启用，1为启用，2为不启用
        categoryNote: '', // 描述
        categoryProductType: '', // 限制类商品
        dangerousOrder: '', // 危化品等级，限制类商品为危险品（值为1）的时候显示该下拉选项
        productTemplateNames: '', // 关联商品模板
        brandNames: '', // 关联品牌
        acceptItemNames: '', // 关联验收事项
        classificationNames: '', // 关联归类名称
        isPriceSensitive: '', // 是否价格敏感，1为是，2为否
        isMetal: '', // 是否金属制品，1为是，2为否
        isKey: '', // 是否重点，1为是，2为否
        batchOrderPrice: null, // 批量订货额
      },
      options: {
        dangerousOrder: [
          { value: '1', label: '一级' },
          { value: '2', label: '二级' },
          { value: '3', label: '三级' },
        ]
      }
    }
  },
  computed: {
    // 是否显示危化品等级
    showDangerousOrder () {
      return ['2', '3'].includes(this.formData.categoryProductType);
    }
  },
  methods: {
    // 关联品类模板
    handleLinkProductTemp () {

    },
    // 关联品牌
    handleLinkBrand () {

    },
    // 关联验收事项
    handleLinkAcceptItem () {

    },
    // 关联归类名称
    handleLinkClassificationName () {

    }
  }
}
</script>
<style lang="less" scoped>
.info-body {
  width: 70%;
  display: flex;
  justify-self: unset;
}
</style>
